<%@ include file="/static/include.jsp"%>

<%@ page import="org.apache.commons.lang3.StringEscapeUtils"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<% 
String errorMessage = (String)request.getParameter("error");
//必须对消息进行无害化处理 
errorMessage=StringEscapeUtils.escapeHtml4(errorMessage);
if(errorMessage==null || errorMessage.equals("null")){
    errorMessage = "";
}
%>
<html>
	<head>
		<title>登录</title>
	<!-- 引入全局javascript:不能放在head中，否则会导致bootstrap的js无效 -->
	<script type="text/javascript" src="${path}/static/lib/jquery-2.0.3.min.js"></script>
	<script type="text/javascript" src="${path}/static/lib/bootstrap-3.3.0-dist/js/bootstrap.min.js"></script>   
	<script type="text/javascript"
		src="${path}/static/lib/jquery-2.0.3.min.js"></script>
	<script type="text/javascript"
		src="${path}/static/lib/bootstrap-3.3.0-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript"
		src="${path}/static/crypt/des.js"></script>
	</head>
	<body>
	<div  class="container">
		<div class="col-md-6 col-md-offset-3">
			<!-- PAGE TITLE -->
			<div class="page-header">
				<h1><span class="glyphicon glyphicon-tower"></span>用户登录</h1>
			</div>
			<div id="errorMessages" class="help-block" style="color: red"></div>
       		<!-- FORM  novalidate-->
			<form id="login_form"  action="${path}/authenticate" method="post" role="form">
				<!-- NAME -->
				<div id="username-group" class="form-group">
					<label>用户名</label> 
					<input type="text" name="username" class="form-control" placeholder="用于登录的账号" required maxlength="10">
				</div>

				<div id="password-group" class="form-group">
					<label>密码</label> 
					<input type="password" name="password" class="form-control"  required maxlength="10">
				</div>
				
				<div id="name-group" class="form-group">
					<label>验证码</label> 
					<div class="form-inline">
					<input type='text' name='captchaGuess'  class="form-control" placeholder="请输入图片中的内容" maxlength="4"/>
                    <img id="img" src="" />
                    </div>
			    </div>

				<!-- SUBMIT BUTTON -->
				<button id=" submit" type="submit" class="btn btn-success">
					<span class="glyphicon glyphicon-flash"></span>登录
				</button>
				<!-- csrf令牌 -->
				<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
			</form>
					<input id="loginBtn" type="submit" name="" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fl"> 
					<input type="submit" name="" value="忘记密码 ^_^? " class="am-btn am-btn-default am-btn-sm am-fr">
					</div>
					<!-- csrf令牌 -->
					<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
				</form>
				<hr>
			</div>
		</div>
	</div>
      <!-- <input type='checkbox' name='remember-me'/>自动登录<br> -->
	<script type="text/javascript">
		setImgURL();
		var errorMessage = "<%=errorMessage%>";
			if (errorMessage == 1) {
				$("#errorMessages").html("身份认证失败：用户名或密码错误!");
			} else if (errorMessage == 2) {
				$("#errorMessages").html("身份认证失败：验证码错误!");
			}
			//console.log('${sessionScope["SPRING_SECURITY_LAST_EXCEPTION"].message}');
			/*
			    使用伪随机数生成图片url后缀，防止内容固定导致浏览器使用本地缓存 
			 */
			function setImgURL() {
				var url = keter.path + "/captcha/new?";
				var date = new Date();
				$("#img").attr("src",
						url + date.getSeconds() + date.getMilliseconds());
			}
	
			(function($) {
				$('#img').click(function(e) {
					setImgURL();
				});
			})(jQuery);
	</script>  
</body>
</html>
		<script type="text/javascript">
			setImgURL();
			var errorMessage = "<%=errorMessage%>";
				if (errorMessage == 1) {
					$("#errorMessages").html("身份认证失败：用户名或密码错误!");
				} else if (errorMessage == 2) {
					$("#errorMessages").html("身份认证失败：验证码错误!");
				}
				//console.log('${sessionScope["SPRING_SECURITY_LAST_EXCEPTION"].message}');
				/*
				    使用伪随机数生成图片url后缀，防止内容固定导致浏览器使用本地缓存 
				 */
				function setImgURL() {
					var url = keter.path + "/captcha/new?";
					var date = new Date();
					$("#img").attr("src",
					   url + date.getSeconds() + date.getMilliseconds());
				}
		
				(function($) {
					$('#img').click(function(e) {
						setImgURL();
					});
				})(jQuery);
				
				(function($) {
					$('#loginBtn').click(function(e) {
						alert($('#password').val());
					    alert(strEnc($('#password').val(),"key1","key2","key3"));	
					});
				})(jQuery);
		</script>
	</body>
	</html>
